<template>
  <div class="content_1">
    <div class="cash-title-list">
      <div
        class="item-title"
        v-for="item in topTab"
        :key="item.type"
        v-show="item.currentPower"
        v-html="item.label + '('+ item.totalNum +')'"
        :class="{'action':Action===item.type}"
        @click="query(item.type)"
      >
      </div>
    </div>
    <div
      class="nodata"
      v-if="tableData.length == 0"
    >
      <span>暂时没有相关内容</span>
    </div>
    <div
      class="content"
      v-for="(item,index) in tableData "
      :key="index"
      v-loading="loading"
      element-loading-text="加载中"
    >
      <div class="content-t pr">
        <span class="user">{{item.name}}</span>
        <span class="telnum pa">{{item.telnum}}</span>
        <span class="data pa">{{item.createtime}}</span>
      </div>

      <div class="content-b pr">
        <span class="content-text">反馈内容: {{ item.content }}</span>
      </div>

      <div class="content-right-button pr currentButtom">
        <span
          class="content-right"
          @click="feedback(item.id,item.reportid)"
        >详情</span>
      </div>
    </div>
    <div style="padding:20px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="ScheduleCurrentChange"
        :current-page="pages.pagenum"
        :page-sizes="[10,20, 30, 50,100]"
        :page-size="pages.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
        background
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      companyType: '',
      tableData: [],
      loading: false,
      currentType: '',
      pages: {
        pagesize: 10,
        total: 0,
        pagenum: 1,
      },
      topTab: [
        {
          label: "个人用户意见反馈",
          type: 1,
          currentPower: false,
          totalNum: 0
        },
        {
          label: "企业用户意见反馈",
          type: 2,
          currentPower: false,
          totalNum: 0
        }
      ],
      tabs: [],
      Action: 1
    }
  },
  props: ['type'],
  // components: {
  //   check
  // },
  created () {
    let permisstions = this.GLOBAL.permisstions
    permisstions.forEach(item => {
      if (item.power == 8) {
        this.tabs = item.tablelist
        this.tabs.forEach(items => {
          if (items.table == "8001") {
            this.topTab[0].currentPower = true
          } else if (items.table == "8002") {
            this.topTab[1].currentPower = true
          }
        })
      }
    })
    if (!this.topTab[0].currentPower && this.topTab[1].currentPower) {
      this.Action = 2
    }
    this.getData();

    this.getTotal(1);
    this.getTotal(2);
  },
  methods: {
    //获取列表
    getData () {
      if (!this.type) {
        return;
      }
      this.currentType = this.type;
      this.loading = true;
      this.$axios.post('/app/v1/platform/unusual/todoList', {
        feedbacktype: this.Action,
        "type": this.type,
        pagesize: this.pages.pagesize,
        pagenum: this.pages.pagenum
      }).then(resp => {
        if (resp.data.message === 'success.') {
          this.tableData = resp.data.data.list;
          if (this.Action == 1) {
            this.topTab[0].totalNum = Number(resp.data.data.totalnum)
          } else if (this.Action == 2) {
            this.topTab[1].totalNum = Number(resp.data.data.totalnum)
          }
          this.pages.total = Number(resp.data.data.totalnum);
          this.pages.pagesize = Number(resp.data.data.pagesize);
          this.loading = false;

        }
      })
    },
    getTotal (feedType) {
      if (!this.type || !this.topTab[feedType - 1].currentPower) {
        return;
      }
      this.currentType = this.type;
      this.loading = true;
      this.$axios.post('/app/v1/platform/unusual/todoList', {
        feedbacktype: feedType,
        "type": this.type,
        pagesize: this.pages.pagesize,
        pagenum: this.pages.pagenum
      }).then(resp => {
        if (resp.data.message === 'success.') {
          if (feedType == 1) {
            this.topTab[0].totalNum = Number(resp.data.data.totalnum)
          } else if (feedType == 2) {
            this.topTab[1].totalNum = Number(resp.data.data.totalnum)
          }
          this.loading = false;

        }
      })
    },
    query (num) {
      this.Action = num;
      this.pages.pagenum = 1;
      this.pages.pagesize = 10;
      this.getData();
    },

    //详情
    feedback (obj, reportid) {

      this.$router.push({
        path: '/home/feedback/FeedbackDetails',
        query: {
          opinionid: obj,
          item: 8,
          current: '0',
          currentType: this.Action,
          backlogReport: true,
          reportid: reportid
        },

      });
    },
    handleSizeChange (val) {
      this.pages.pagenum = 1;
      this.pages.pagesize = val;
      this.getData();
    },
    //分页查询
    ScheduleCurrentChange (val) {
      this.pages.pagenum = val;
      this.getData();
    },
    reportCallback (currentData) {
      var data = {
        reportid: currentData.reportid,
        status: currentData.status,
        content: currentData.content || ''
      }
      this.$emit('reportCallback', data)
    }
  },

}
</script>
<style scoped>
.pr {
  position: relative;
}

.pa {
  position: absolute;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  line-height: 0;
}

.feedback-search-box {
  min-width: 1080px;
}

.feedback-box {
  padding: 0 20px;
  background: #fff;
  border-left: 5px red;
}

.title-left {
  font-size: 18px;
}

.title-icon {
  /* margin-left: 15px; */
  padding-left: 12px;
  border-left: 12px solid #0064e4;
}

.input-Time {
  padding-right: 20px;
}

.content {
  position: relative;
  height: 84px;
  border-bottom: 1px dashed #bfbfbf;
}

.content-t {
  margin: 12px 0 0px 0;
  height: 32px;
  font-size: 18px;
}

.content span {
  display: inline-block;
}

.content-b {
  height: 37px;
  width: 950px;
  line-height: 30px;
  color: #727272;
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-text {
  width: 950px;
}

.content-createtime {
  position: relative;
  height: 32px;
}

.content-createtime > .data {
  display: inline-block;
  height: 20px;
  top: 0;
  line-height: 20px;
  font-size: 16px;
  color: #a1a1a1;
}

.content-createtime > .content-button {
  padding-left: 20px;
}

.content-createtime > .content-button span {
  color: #0064e4;
  font-size: 14px;
}

.content-createtime > .content-button span:first-child {
  margin-right: 10px;
}

.user {
  /* top: 10px;
  padding-right: 20px; */
  top: 10px;
  width: 230px;
  padding-right: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.telnum {
  top: 0px;
  left: 200px;
  padding-left: 55px;
}

.data {
  top: 0px;
  /* right: 343px; */
  right: 30px;
  color: #a1a1a1;
  font-size: 16px;
}

.search-box-top {
  display: flex;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #d2d2d2;
}

.search-item {
  height: 110px;
  line-height: 110px;
  /*border-bottom: 1px solid#d2d2d2;*/
  color: #727272;
}

/* .user {
  display: inline-block;
  height: 20px;

  padding-right: 10px;
} */

.username {
  height: 35px;
  width: 230px;
  padding-left: 5px;
}

input::-webkit-input-placeholder {
  color: #c0c7da;
}

.search {
  width: 100px;
  top: 35px;
  right: 20px;
}

.search-right {
  top: 0px;
  left: 565px;
}

.feedback-b {
  padding: 30px 0;
}

.content-right {
  /* top: -33px;
  right: 50px;*/
  display: inline-block;
  height: 37px;
  width: 40px;
  text-align: center;
  line-height: 37px;
  font-size: 14px;
  color: #6b97eb;
  cursor: pointer;
}

.content-right-button {
  position: absolute;
  height: 37px;
  top: 28px;
  /* right: 72px; */
}

.currentButtom {
  right: 78px;
}
/* tab */
.cash-title-list {
  display: flex;
  height: 50px;
  margin: 15px 20px 15px 0px;
  padding-left: 20px;
  border-bottom: 1px solid #0064e4;
}
.item-title {
  width: 200px;
  height: 50px;
  line-height: 50px;
  border: 1px solid #bfbfbf;
  text-align: center;
  cursor: pointer;
  color: #727272;
  border-bottom: 1px solid #0064e4;
}
.action {
  color: #0064e4;
  border-color: #0064e4 !important;
  background-color: #fff;
  border-bottom-color: #fff !important;
}

.main {
  margin: 0px 0 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid#d2d2d2;
}

.checkTab {
  display: flex;
  margin-top: 20px;
}

.checkTab li {
  font-size: 14px;
}

.title {
  margin-right: 10px;
  position: relative;
}

.tittleActive > .bottom_border {
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 60px;
  height: 3px;
  border-radius: 4px;
  background: #0064e4;
  transform: translateX(-50%);
}

.title > span {
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 20px;
  letter-spacing: 0px;
  color: #727272;
}

.tittleActive > span {
  color: #0064e4;
  /* border-bottom:2px solid #0064e4;*/
}

/* 查询一栏样式 */
.search-box {
  display: flex;
  justify-content: space-between;
  color: #727272;
}

.name {
  height: 35px;
  width: 220px;
  padding-left: 5px;
  border: 1px solid #dcdfe6;
}

.nodata {
  text-align: center;
  font-size: 12px;
  height: 60px;
  line-height: 60px;
  color: #909399;
  border-bottom: 1px dashed #bfbfbf;
}

.nodata .el-icon-warning {
  color: #fc9262;
  font-size: 50px;
  vertical-align: middle;
}
</style>


